<template>
  <div>
    <div>
      <Row :gutter="10">
        <Col :lg="24" :xl="24" style="margin-bottom: 10px">
          <div>
            <div class="boot-itle" style="margin: 2% 0; margin-left: 3%">
              实时数据
            </div>
            <div style="display: flex">
              <div
                style="margin-top:10px; !important; width: 45.5%;margin-left:3%;"
              >
                <Card class="card-progress-count-plaltf">
                  <div class="card-header">
                    <span>进行中货源</span>
                  </div>
                  <div class="value">
                    <span>
                      {{
                        homeData.goodsNum
                          ? homeData.goodsNum
                          : "0"
                      }}
                    </span>
                  </div>
                </Card>
              </div>
              <div
                style="margin-top:10px; !important; width: 45.5%;margin-left:3%;"
              >
                <Card class="card-progress-count-plaltf">
                  <div class="card-header">
                    <span>待委托抢单</span>
                  </div>
                  <div class="value">
                    <span>
                      {{
                        homeData.tobeEntrustedorderNum
                          ? homeData.tobeEntrustedorderNum
                          : "0"
                      }}
                    </span>
                  </div>
                </Card>
              </div>
              <div
                style="margin-top:10px; !important; width: 45.5%;margin-left:3%;"
              >
                <Card class="card-progress-count-plaltf">
                  <div class="card-header">
                    <span>待接单运单</span>
                  </div>
                  <div class="value">
                    <span>
                      {{
                        homeData.pendingStatementorderNum
                          ? homeData.pendingStatementorderNum
                          : "0"
                      }}
                    </span>
                  </div>
                </Card>
              </div>
              <div
                style="margin-top:10px; !important; width: 45.5%;margin-left:3%;margin-right:3% ;"
              >
                <Card class="card-progress-count-plaltf">
                  <div class="card-header">
                    <span>待装货运单</span>
                  </div>
                  <div class="value">
                    <span>
                      {{
                        homeData.tobeLoadedorderNum
                          ? homeData.tobeLoadedorderNum
                          : "0"
                      }}
                    </span>
                  </div>
                </Card>
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 8%"></div>
          <div style="display: flex">
            <div
              style="margin-top:10px; !important; width: 45.5%;margin-left:3%;"
            >
              <Card class="card-progress-count-plaltf">
                <div class="card-header">
                  <span>运输中运单</span>
                </div>
                <div class="value">
                  <span>
                    {{
                      homeData.transportorderNum
                        ? homeData.transportorderNum
                        : "0"
                    }}
                  </span>
                </div>
              </Card>
            </div>
            <div
              style="margin-top:10px; !important; width: 45.5%;margin-left:3%;"
            >
              <Card class="card-progress-count-plaltf">
                <div class="card-header">
                  <span>待审核运单</span>
                </div>
                <div class="value">
                  <span>
                    {{
                      homeData.tobeReviewedorderNum
                        ? homeData.tobeReviewedorderNum
                        : "0"
                    }}
                  </span>
                </div>
              </Card>
            </div>
            <div
              style="margin-top:10px; !important; width: 45.5%;margin-left:3%;"
            >
              <Card class="card-progress-count-plaltf">
                <div class="card-header">
                  <span>待支付运单</span>
                </div>
                <div class="value">
                  <span>
                    {{
                      homeData.tobePaidorderNum
                        ? homeData.tobePaidorderNum
                        : "0"
                    }}
                  </span>
                </div>
              </Card>
            </div>
            <div
              style="margin-top:10px; !important; width: 45.5%;margin-left:3%;margin-right:3%"
            >
              <Card class="card-progress-count-plaltf">
                <div class="card-header">
                  <span>已支付运单</span>
                </div>
                <div class="value">
                  <span>
                    {{
                      homeData.paidorderNum
                        ? homeData.paidorderNum
                        : "0"
                    }}
                  </span>
                </div>
              </Card>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <!-- 用户认证弹框  -->
    <Modal
      :closable="false"
      :mask-closable="false"
      class="Modalcss"
      v-model="userAuthenticationModal"
      :title="userTitle"
      :styles="{ top: '200px' }"
    >
      <p>
        &nbsp; &nbsp; &nbsp;&nbsp; 您还未进行<span style="color: red"
          >资料认证</span
        >，请前往认证页面进行认证，否则将您将无法正常使用发货功能等功能。
      </p>
      <div style="margin-top: 20px"></div>
      <div slot="footer">
        <Button @click="authenticationChoice" class="but-left">去认证</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { CountUp } from "countup.js";
import {
  customerService, //获取信息
} from "@/api/ownerEnd/financeDamin";
import {
  getNewMessageNotice, //获取平台最新一条公告
  homePageStatistics, //货主端 --- 首页统计
  getNewMessageSend,
} from "@/api/ownerEnd/home";
import { getProvinceData, getAreaCityList } from "@/api/index";
import {
  getPayWallet, //钱包
  userInfoVo, //货主信息
} from "@/api/ownerEnd/waybillAdmin";
import ownerNews from "@/views/componentsonn_source_goods/ownerNews";
import ownerAuthentication from "./ownerAuthentication";
export default {
  data() {
    return {
      userTitle: "企业认证",
      userAuthenticationModal: false, //用户认证
      authenticationRadio: "个人认证", //选择用户类型
      userChoice: "",

      authentication: false,
      loginRole: "",
      id: "aa",
      accountLading: false,
      accountModal: false,
      platformInformation: {},
      message: "",
      userCompanyInfoData: {},
      homeData: {},
      getPayWalletData: {},
      newNews: false, //新消息
      newsData: {},
      personals: true,
      enterprises: false,
      province: "", //省
      citys: "", //市
      areas: "", //区
      streetext: "", //详细地址
    };
  },
  components: {
    ownerNews,
    ownerAuthentication,
  },
  methods: {
    personalsbuts() {
      this.personals = true;
      this.authenticationRadio = "个人认证";
      this.enterprises = false;
    },
    enterprisesbuts() {
      this.enterprises = true;
      this.authenticationRadio = "企业认证";
      this.personals = false;
    },
    init() {
      this.$nextTick(() => {
        let demo = new CountUp(this.id, 1000);
        if (!demo.error) {
          demo.start();
        }
      });
      //新消息
      getNewMessageSend({}).then((res) => {
        this.newsData = res.result;
        if (res.result) {
          if (res.result.status == 0) {
            this.newNews = true;
            this.newsShow = false;
            this.$nextTick(() => {
              this.newsShow = true;
            });
          } else {
            this.newNews = false;
          }
        }
      });
    },

    // 获取平台最新一条公告
    messageNotice() {
      getNewMessageNotice({}).then((res) => {
        if (res.result != null) {
          this.message = res.result.content;
        }
      });
    },
    // 个人信息
    getUserCompanyInfoData() {
      userInfoVo().then((res) => {
        this.streetext = res.result.street;
        this.userCompanyInfoData = res.result.companyInfoVo;
        if (res.result.address) {
          this.getProvinceDataList(res.result.address);
        }
        if (res.result.companyInfoVo.companyStatus == 0) {
          this.userAuthenticationModal = true;
          this.authentication = false;
          this.userChoice = this.$route.query.authenticationRadio;
        }
      });
    },
    getProvinceDataList(val) {
      val = val.split(",");
      let fn = () => {
        getProvinceData().then((res) => {
          if (res.code == 200) {
            res.result.forEach(function (e) {
              e.level = 1;
              e.label = e.provinceName;
              e.pid = e.provinceCode;
              e.value = e.provinceCode;
              e.loading = false;
              e.children = [];
            });
            res.result.forEach((item) => {
              if (item.value == val[0]) {
                this.province = item.label;
                this.ProvinceloadData(item, val);
              }
            });
          } else {
            this.$Message.error(res.message);
          }
        });
      };
      fn();
    },
    // 搜索卸货详细地址
    ProvinceloadData(item, val) {
      item.loading = true;
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          item.children = res.result;
          res.result.forEach((item) => {
            if (item.value == val[1]) {
              this.citys = item.label;
              console.log(this.citys);
              this.ProvinceloadData1(item, val);
            }
          });
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 搜索卸货详细地址
    ProvinceloadData1(item, val) {
      getAreaCityList({ code: item.value, type: item.level }).then((res) => {
        item.loading = false;
        if (res.code == 200) {
          res.result.forEach(function (e) {
            if (e.level != 3) {
              e.level = e.level;
              e.label = e.label;
              e.pid = e.pid;
              e.value = e.value;
              e.loading = false;
              e.children = [];
            } else {
              e.value = e.value;
              e.label = e.label;
            }
          });
          res.result.forEach((item) => {
            if (item.value == val[2]) {
              this.areas = item.label;
              this.province = this.province + this.citys + this.areas;
            }
          });
          item.children = res.result;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 统计
    gethomePageStatistics() {
      homePageStatistics().then((res) => {
        this.homeData = res.result;
        this.rollData(JSON.stringify(res.result));
      });
    },
    rollData(data) {
      let obj = JSON.parse(data);
      let arr = [];
      for (let key in obj) {
        arr.push({
          label: key,
          val: obj[key],
        });
      }
      var options = {
        decimalPlaces: 2,
      };
      arr.forEach((item) => {
        if (
          item.label == "staySettlementMoney" ||
          item.label == "progressSettlementMoney" ||
          item.label == "alreadySettlementMoney" ||
          item.label == "stayBillMoney" ||
          item.label == "progressBillMoney" ||
          item.label == "alreadyBillMoney" ||
          item.label == "stayInvoiceMoney" ||
          item.label == "toexamineInvoiceMoney" ||
          item.label == "progressInvoiceMoney" ||
          item.label == "alreadyInvoiceMoney"
        ) {
          item.val = this.munber(item.val);
          let thereDecimals = new CountUp(item.label, item.val, options);
          thereDecimals.start();
        } else {
          let NoDecimal = new CountUp(item.label, item.val);
          NoDecimal.start();
        }
      });
    },
    munber(val) {
      let num = 0;
      if (val == 0) {
      } else {
        num = val / 10000;
      }
      if (num > 0.000001) {
        num.toFixed(2);
      } else {
        num = 0;
      }
      return (num = Number(num.toFixed(2)));
    },

    // 消息弹框关闭
    newsEnd(val) {
      // console.log(val);
    },
    // 身份认证
    authenticationChoice() {
      this.$router.push({
        name: "ownerManagement/personal-center/accountUmberAdmin",
        query: {
          authentication: "认证资料",
        },
      });
    },
    authenticatiSuccess(val) {
      if (val == 1) {
        this.authentication = false;
        this.userAuthenticationModal = false;
      }
    },
  },
  mounted() {
    this.init();
    this.messageNotice();
    this.loginRole = JSON.parse(localStorage.getItem("userInfo"));
    this.getUserCompanyInfoData();
  },
  created() {
    this.gethomePageStatistics();
  },
};
</script>

<style lang="less">
.work-desk {
  .inner {
    padding: 10px 20px 20px;
    .head {
      height: 50px;
      background-color: #fff;
    }
    .newscss {
      width: 50px;
      background-color: #fff;
      height: 48px;
      img {
        width: 35px;
        height: 35px;
        margin-left: 14px;
        margin-top: 6px;
      }
    }
    .wel-area {
      margin-top: 18px;
      background: #fff;
      // padding: 14px 0;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
    }
    .dataPreview {
      margin-top: 18px;
      background: #fff;
      // padding: 14px 0;
      margin-bottom: 14px;
      position: relative;
      z-index: 2;
      .basicInformation {
        width: 40px;
        padding: 15px 8px;
        text-align: center;
        background: #e0e0eb;
        font-size: 16px;
        color: #fff;
        line-height: 22px;
        margin-right: 6px;
        font-weight: 600;
      }
      .viedt {
        padding: 18px 10px 15px 26px;
        font-size: 18px;
        color: #39394d;
        font-weight: 700;
      }
    }
  }
}
.marqueeText {
  width: 95%;
  margin-left: 10px;
  line-height: 50px;
}
// color: #111113;
// cursor: pointer;
.div-left {
  height: 35px;
  line-height: 35px;
}
.but-left {
  margin-left: -10px;
  background-color: #19be6b !important;
  color: #fff !important;
  border: 0 !important;
}
.div-width {
  height: 120px;
  background: #f7f7fb;
  padding: 0 25px;
  padding-top: 14px;
}
.text-font {
  font-size: 18px;
  color: #39394d;
  font-weight: 600;
}
.div-display-flex {
  display: flex;
  justify-content: space-between;
}
.div-little {
  font-size: 12px;
  color: #84849a;
  margin-left: 22px;
  font-weight: 400;
}
.num-color {
  margin-top: 4px;
  font-size: 24px;
  color: #39394d;
  font-weight: bold;
}
.num-color-tow {
  font-size: 24px;
  color: #84849a;
  cursor: default;
}
.itle-div-width {
  width: 100px;
}
.bottom-div {
  font-size: 14px;
  color: #39394d;
  white-space: nowrap;
}

.Modalcss {
  .ivu-modal-header {
    border-bottom: 0px !important;
  }
  .ivu-modal-footer {
    border-top: 0px !important;
  }
  .ivu-modal-header-inner {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
}
.driverList {
  color: #333;
  font-size: 16px;
  font-weight: 500;
}
.listMomoney {
  margin-left: 15px;
  font-weight: 600;
}
.copys {
  margin-left: 15px;
  cursor: pointer;
  color: #19be6b;
}
.boot-itle {
  font-size: 25px;
  font-weight: 600;
}
.card-progress-count-plaltf {
  height: 170px;
  .card-header {
    display: flex;
    height: 22px;
    align-items: center;
    justify-content: space-between;
    // color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    margin: 15px 0;
  }
  .value {
    height: 38px;
    margin-top: 35px;
    margin-bottom: 6px;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-size: 30px;
    line-height: 38px;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    span{
      color: #FFCC66;
    }
  }
}
</style>